<template>
  <el-main>

        <div v-show="busie">
          <el-form :model="queryForm" class="demo-form-inline">
            <el-form-item label="城市名称" style="margin-top: 3%;margin-left: 3%">
              <el-col :span="5">
                <el-select v-model="queryForm.city" placeholder="请选择城市">
                  <el-option value="">请选择--</el-option>
                  <el-option
                    v-for="item in cityse"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="公寓名称" style="margin-top: 3%;margin-left: 3%;width: 180px">
              <el-input v-model="queryForm.businessName" placeholder="请输入公寓名称"></el-input>
            </el-form-item>

            <el-form-item  label="查询日期" style="margin-top: 3%;margin-left: 3%">
              <el-col :span="5">
                <el-date-picker type="date"  placeholder="选择交易日期" v-model="queryForm.startDate" style="width: 100%;"></el-date-picker>
              </el-col>

              <el-col class="line" :span="0.5">至</el-col>

              <el-col :span="5">
                  <el-date-picker type="date" placeholder="选择交易时间" v-model="queryForm.endDate" style="width: 100%;"></el-date-picker>
              </el-col>

              <el-col :span="5">
              <el-button style="margin-left: 70%;" @click="Query()" type="success">查询</el-button>
              </el-col>

            </el-form-item>
          </el-form>
          <el-button type="primary" @click="be()">收入</el-button><el-button @click="bu()" type="warning">支出</el-button>
                  <span style="font-size: 20px">收入金额总计：{{insertData.totalSum}}</span>
                  <p>
                    <span>押金(总计)：{{insertData.depositSum}}</span>
                    <span>租金(总计)：{{insertData.rentSum}}</span>
                    <span>电费(总计)：{{insertData.electricityFeeSum}}</span>
                    <span>水费(总计)：{{insertData.waterFeeSum}}</span>
                    <span>宽带(总计)：{{insertData.netFeeSum}}</span>
                    <span>燃气费(总计)：{{insertData.gasFeeSum}}</span>
                    <span>有线电视(总计)：{{insertData.cableFeeSum}}</span>
                    <span>其他(总计)：{{insertData.otherFeeSum}}</span>
                  </p>
                  <el-table
                    :data="quertData"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                      prop="businessName"
                      label="公寓名称">
                    </el-table-column>
                    <el-table-column
                      prop="dealDate"
                      label="交易时间">
                    </el-table-column>
                    <el-table-column
                      prop="total"
                      label="总计（元）">
                    </el-table-column>
                    <el-table-column
                      prop="deposit"
                      label="押金（元）">
                    </el-table-column>
                    <el-table-column
                      prop="rent"
                      label="租金（元）">
                    </el-table-column>
                    <el-table-column
                      prop="electricityFee"
                      label="电费（元）">
                    </el-table-column>
                    <el-table-column
                      prop="waterFee"
                      label="水费（元）">
                    </el-table-column>
                    <el-table-column
                      prop="netFee"
                      label="宽带（元）">
                    </el-table-column>
                    <el-table-column
                      prop="gasFee"
                      label="燃气费（元）">
                    </el-table-column>
                    <el-table-column
                      prop="cableFee"
                      label="有线电视费（元）"
                      width="150px">
                    </el-table-column>
                    <el-table-column
                      prop="otherFee"
                      label="其他（元）"
                      width="100px">
                    </el-table-column>
                    <el-table-column
                      label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" @click="handFe(scope.row)" type="danger">查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryForm.pageNo"
                    :limit.sync="queryForm.pageSize"
                    @pagination="getList"
                  />
        </div>


       <div v-show="busin">
            <el-form :model="queryForm2" class="demo-form-inline">
              <el-form-item label="城市名称" style="margin-top: 3%;margin-left: 3%">
                <el-col :span="5">
                  <el-select v-model="queryForm2.city" placeholder="请选择城市">
                    <el-option value="">请选择--</el-option>
                    <el-option
                      v-for="item in cityse"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>

              <el-form-item label="公寓名称" style="margin-top: 3%;margin-left: 3%;width: 180px">
                <el-input v-model="queryForm2.businessName" placeholder="请输入公寓名称"></el-input>
              </el-form-item>

              <el-form-item  label="查询日期" style="margin-top: 3%;margin-left: 3%">
                <el-col :span="5">
                  <el-date-picker type="date"  placeholder="选择交易日期" v-model="queryForm2.startDate" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="0.5">至</el-col>
                <el-col :span="5">
                  <el-date-picker type="date" placeholder="选择交易时间" v-model="queryForm2.endDate" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="5">
                <el-button  style="margin-left: 70%;" @click="Query2()" type="success">查询</el-button>
                </el-col>
              </el-form-item>
            </el-form>

                   <!--支出-->
                    <el-button type="primary" @click="be()">收入</el-button><el-button @click="bu()" type="warning">支出</el-button>
                   <span style="font-size: 20px">支出金额总计：{{insertCount}}</span>
                   <el-table
                     :data="quertData2"
                     border
                     stripe
                     style="width: 100%">
                     <el-table-column
                       prop="businessName"
                       label="商户名称">
                     </el-table-column>
                     <el-table-column
                       prop="dealDate"
                       label="交易时间">
                     </el-table-column>
                     <el-table-column
                       prop="dealType"
                       label="类型（提现）">
                     </el-table-column>
                     <el-table-column
                       prop="amount"
                       label="金额">
                     </el-table-column>
                     <el-table-column
                       prop="operateUser"
                       label="操作人">
                     </el-table-column>
                   </el-table>
                   <pagination
                     v-show="total2>0"
                     :total="total2"
                     :page.sync="queryForm2.pageNum"
                     :limit.sync="queryForm2.pageSize2"
                     @pagination="getzhiList"
                   />

          </div>


        <el-dialog
              title="查看"
              :visible.sync="dialogVisible"
              width="60%">     <span style="font-size: 20px">交易日期：{{quertData.dealDate}} 收入金额总计：</span>

                            <span>
                                      <el-table
                                        :data="quertData3"
                                        border
                                        stripe
                                        style="width: 100%">
                                       <el-table-column
                                         prop="businessName"
                                         label="序号">
                                       </el-table-column>
                                       <el-table-column
                                         prop="dealDate"
                                         label="交易时间">
                                       </el-table-column>
                                       <el-table-column
                                         prop="dealType"
                                         label="房源名称">
                                       </el-table-column>
                                       <el-table-column
                                         prop="amount"
                                         label="租客姓名">
                                       </el-table-column>
                                       <el-table-column
                                         prop="operateUser"
                                         label="租客电话">
                                       </el-table-column>
                                        <el-table-column
                                          prop="operateUser"
                                          label="费用类型">
                                       </el-table-column>
                                        <el-table-column
                                          prop="operateUser"
                                          label="收支状态">
                                       </el-table-column>
                                        <el-table-column
                                          prop="operateUser"
                                          label="金额">
                                       </el-table-column>
                                        <el-table-column
                                          prop="operateUser"
                                          label="支付方式">
                                       </el-table-column>
                                     </el-table>

                            </span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                           <el-button @click="qian()" type="danger">前一天</el-button>
                           <el-button @click="hou()" type="success">后一天</el-button>
                        </span>
        </el-dialog>













  </el-main>
</template>

<script>
  import {Sumlist,searchlist,SumZhilist,Zhilist,citylist} from "@/api/system/jinrong";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    export default {
        name: "index",
      data(){
          return{
            queryForm: {
              pageNo:1,
              pageSize:10,
            },
            queryForm2: {
              pageNum:1,
              pageSize2:10,
            },
            total:0,
            total2:0,
            insertData:[],
            insertCount:[],
            quertData:[],
            quertData2:[],
            cityse:[],
            busin:false,
            busie:true,
            dialogVisible: false,
          }
      },
      created() {
        this.getListSum();
        this.getListZhiSum();
        this.getList();
        this.getzhiList();
        this.getcitylist();
      },
      methods:{
        handFe(row){
          this.dialogVisible=true;
          this.quertData=row;
        },
        be(){
          this.busie=true;
          this.busin=false;
        },
        bu(){
          this.busie=false;
          this.busin=true;
        },
        Query2(){
          this.getListZhiSum();
          this.getzhiList();
        },
        Query(){
          this.getList();
          this.getListSum();
        },
        getListSum(){
          Sumlist(this.queryForm).then(res=>{
            console.log(res);
            this.insertData = res.data;
          })
        },
        getList(){
          searchlist(this.queryForm).then(res=>{
            console.log(res);
            this.total=res.data.total;
            this.quertData = res.data.list;
          })
        },
        getListZhiSum(){
          SumZhilist(this.queryForm2).then(res=>{
            console.log(res);
            this.insertCount = res.data
          })
        },
        getzhiList(){
          Zhilist(this.queryForm2).then(res=>{
            console.log(res);
            this.total2=res.data.total;
            this.quertData2 = res.data.list;
          })
        },
        getcitylist(){
          citylist().then(res=>{
            console.log(res);
            this.cityse = res.data;
          })
        },


      }
    }
</script>

<style scoped>

</style>
